<template>
	<div class="flex ac  mainpage">
		<Avatar icon="ios-person" size="large" />
		<h3>KHUYHKH..LHGGK</h3>
		<div>
			<Button shape="circle" class="margin">Circle</Button>
			<Button shape="circle" class="margin" icon="ios-search"></Button>
			<Button shape="circle" class="margin" icon="ios-search"></Button>
		</div>
		<Tabs value="On sale">
			<TabPane label="On sale" name="On sale">
				<HotBids />
			</TabPane>
			<TabPane label="Collectibles" name="Collectibles"></TabPane>
			<TabPane label="Created" name="Created"></TabPane>
			<TabPane label="Liked" name="Liked"></TabPane>
			<TabPane label="Following" name="Following"></TabPane>
			<TabPane label="Followers" name="Followers"></TabPane>
		</Tabs>
	</div>
</template>

<script>
import HotBids from '../components/HotBids';
export default {
	components: {
		HotBids,
	},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mainpage {
	flex-direction: column;
	padding: 100px;
	min-height: 11200px;
	overflow: scroll;
}
</style>
